<template>
  <div class="EosResources">
    <ul>
      <li class="balanceList">
        <div class="cpuContent">
          <i class="tag greenBack"></i>
          <div class="inblo">
            <span class="cpuName">{{ $t('tronExchange.bandwidth') }}</span>
          </div>
        </div>
        <!-- <el-popover
          placement="bottom"
          trigger="hover">
          <div style="width: 400px;">
            <p>{{ $t('tronExchange.bandwidthTip1') }}</p>
          </div>
          <div slot="reference" style="cursor: pointer;" class="cpuContent">
            <div class="tbox" style="display: inline-block; margin-left: -2px;">
              <i class="iconfont icon-huaban"></i>
            </div>
          </div>
        </el-popover> -->
        <el-popover
          placement="bottom"
          trigger="hover">
          <div>
            {{$t('myWallet.used')}}{{resource && resource.net.used || 0}}
            {{ $t('tronExchange.bandwidth') }} / {{$t('myWallet.total')}}{{resource && resource.net.total || 0}}{{ $t('tronExchange.bandwidth') }}
          </div>
          <div slot="reference" class="cpuContent">
            <!-- <i class="tag greenBack"></i> -->
            <div class="inblo">
              <!-- <span class="cpuName">带宽</span> -->
              <span class="surplus">
                {{$t('myWallet.used')}}
                {{netPercentage}}%
              </span>
            </div>
          </div>
        </el-popover>
        <span class="jumpBtn" @click="handleToOperation(0)">{{ $t('tronExchange.FreezeUnfreeze') }} {{ $t('tronExchange.bandwidth') }}</span>
      </li>
      <li class="balanceList">
        <div class="cpuContent">
          <i class="tag greenBack"></i>
          <div class="inblo">
            <span class="cpuName">{{ $t('tronExchange.energy') }}</span>
          </div>
        </div>
        <!-- <el-popover
          placement="bottom"
          trigger="hover">
          <div style="width: 400px;">
            <p>{{ $t('tronExchange.energyTip1') }}</p>
          </div>
          <div slot="reference" style="cursor: pointer;" class="cpuContent">
            <div class="tbox" style="display: inline-block; margin-left: -2px;">
              <i class="iconfont icon-huaban"></i>
            </div>
          </div>
        </el-popover> -->
        <el-popover
          placement="bottom"
          trigger="hover">
          <div>
            {{$t('myWallet.used')}}{{resource && resource.energy.used || 0}}
            {{ $t('tronExchange.energy') }} / {{$t('myWallet.total')}}{{resource && resource.energy.total || 0}}{{ $t('tronExchange.energy') }}
          </div>
          <div slot="reference" class="cpuContent">
            <!-- <i class="tag greenBack"></i> -->
            <div class="inblo">
              <!-- <span class="cpuName">带宽</span> -->
              <span class="surplus">
                {{$t('myWallet.used')}}
                {{energyPercentage}}%
              </span>
            </div>
          </div>
        </el-popover>
        <span class="jumpBtn" @click="handleToOperation(1)">{{ $t('tronExchange.FreezeUnfreeze') }} {{ $t('tronExchange.energy') }}</span>
      </li>
      <!-- 能量/带宽 dialog -->
      <el-dialog
        :visible.sync="bandWidthVisible"
        width="500px"
        center
        :close-on-click-modal="false">
        <band-width :status="status" :bandWidthVisible="bandWidthVisible"/>
      </el-dialog>
    </ul>
  </div>
</template>

<script>
import { EosModel } from '@/utils/eos';
import BandWidth from '@/views/myWallet/tronResource/BandWidth';

export default {
  name: 'TronResources', // tron资源
  data() {
    return {
      bandWidthVisible: false,
      status: 0, // 0-带宽 1-能量
      resource: null,
      netPercentage: 0,
      energyPercentage: 0,
      getResourceTimer: false
    }
  },
  components: {
    BandWidth
  },
  props: {
  },
  watch: {
    '$store.state.app.scatter.identity': {
      handler: function listen(val) {
        if (val) {
          this.handleGetResource();
        }
      },
      deep: true,
    },
  },
  computed: {},
  created() {},
  mounted() {
    this.handleGetResource();
  },
  beforeDestroy() {
    if (this.getResourceTimer) {
      clearTimeout(this.getResourceTimer);
    }
  },
  methods: {
    // 获取资源信息
    handleGetResource() {
      EosModel.getAccountResources((res) => {
        if (res === 'error') {
          this.netPercentage = 100;
          this.energyPercentage = 100;
          return;
        }
        if (res !== 'error') {
          this.resource = res;
          if (res.net.used === 0 && res.net.total === 0) {
            this.netPercentage = 100;
          }
          if (res.net.used === 0 && res.net.total !== 0) {
            this.netPercentage = 0;
          }
          if (res.energy.used === 0 && res.energy.total === 0) {
            this.energyPercentage = 100;
          }
          if (res.energy.used === 0 && res.energy.total !== 0) {
            this.energyPercentage = 0;
          }
          if (res.net.total) {
            this.netPercentage = Number(((res.net.used / res.net.total) * 100).toFixed(1));
          }
          if (res.energy.total) {
            this.energyPercentage = Number(((res.energy.used / res.energy.total) * 100).toFixed(1))
          }
        }
        if (this.getResourceTimer) {
          clearTimeout(this.getResourceTimer);
        }
        this.getResourceTimer = setTimeout(() => {
          this.handleGetResource();
        }, 3000)
      });
    },
    handleToOperation(status) {
      this.status = status;
      this.bandWidthVisible = true;
    }
  }
}
</script>
<style lang="scss" scoped>
.redColor {
  color: #EE1443 !important;
}

.orangeColor {
  color: #FF9800 !important;
}

.greenColor {
  color: #67C269 !important;
}

.redBack {
  background: #EE1443 !important;
}

.orangeBack {
  background: #FF9800 !important;
}

.greenBack {
  background: #67C269 !important;
}

.EosResources {
  padding: 0 !important;

  .balanceList {
    line-height: 26px;
    .cpuContent {
      display: inline-block;
      cursor: pointer;
      padding: 0 !important;
      .tag {
        display: inline-block;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: #67C269;
        margin-right: 6px;
      }
    }
    .cpuName {
      display: inline-block;
      min-width: 32px;
    }
    .surplus {
      display: inline-block;
      min-width: 80px;
      margin-left: 5px;
    }
    .jumpBtn {
      margin-left: 5px;
      color: #278EDA;
      cursor: pointer;
    }
    .inblo {
      display: inline-block;
      padding: 0 !important;
    }
  }
}
</style>

